<template>
  <div :style="{ width: tdStyle.width }" class="displayAttachment" v-if="fileList.length > 0">
    <div v-for="(item, index) in fileList" class="link" :key="index">
      <span class="fileName" :title="item.originalName">{{ index + 1 }}. {{ item.originalName }}</span>
      <i class="el-icon-close" @click="clearFile(item, index)"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    tdStyle: {},
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      fileObj: {},
      fileList: []
    };
  },
  watch: {
    value: {
      handler(val) {
        this.fileList = structuredClone(val);
      },
      deep: true
    }
  },
  methods: {
    clearFile(item, index) {
      this.fileList.splice(index, 1);
      this.$emit('handleClearFile', {
        x: this.x,
        y: this.y,
        data: this.fileList
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.displayAttachment {
  height: 100%;
  position: relative;
  .link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #4390ef;
    text-align: left;
    margin: 2px;
    box-sizing: border-box;
    font-size: 14px;
    .fileName {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .el-icon-close {
      margin: 0 0 0 5px;
      cursor: pointer;
    }
  }
}
</style>
